<template>
	<div style=" margin:0 auto; width: 800px;">
		<Row>
		</Row>
		<Row>
			<col span="8">
				<div style=" float: left; margin-top:50px ">
					<div class="div_photo">
						
					</div>
					<Row>
						<col>
					<Upload
				        ref="upload"
				        :show-upload-list="false"
				        :default-file-list="defaultList"
				        :on-success="handleSuccess"
				        :format="['jpg','jpeg','png']"
				        :max-size="2048"
				        :on-format-error="handleFormatError"
				        :on-exceeded-size="handleMaxSize"
				        :before-upload="handleBeforeUpload"
				        multiple
				        type="drag"
				        action="//jsonplaceholder.typicode.com/posts/"
				        style="display: inline-block;width:58px;">
				        <div style="width: 58px;height:58px;line-height: 58px;">
				            <Icon type="camera" size="20"></Icon>
				        </div>
				    </Upload>
				    </col>				  
				        <col>
				        <div class="div_eye" >
				        	预览
				            <Icon type="eye" @click.native="handleView(a42bdcc1178e62b4694c830f028db5c0)"></Icon>
				        </div>
				   	    </col>
				        </Row>			   
				     <Modal title="查看图片" v-model="visible">
				        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
				    </Modal>
				</div>
			</col>
			<col span="16">
			    <Form :model="formList"   :rules="rulesList" :label-width="80" style=" margin:50px; width: 500px; float:right;">
			        <FormItem prop="name" label="姓名">
			            <Input v-model="formList.name"    placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem prop="conect" label="邮件地址">
			            <Input v-model="formList.conect"   placeholder="请输入"></Input>
			        </FormItem>			        
		            <Row>
		                <Col  span="11">
			                 <FormItem prop="birthday" label="出生日期">
			                    <DatePicker v-model="formList.birthday" type="date" placeholder="选择日期" ></DatePicker>
			                 </FormItem>
		                </Col>
		                <Col span="11" style="text-align: center">	
			                <FormItem prop="sex"   label="性别">
					            <RadioGroup v-model="formList.sex" >
					                <Radio  label="male" >男</Radio>
					                <Radio label="female" >女</Radio>
					            </RadioGroup>
			    		    </FormItem>
		                </Col>
		            </Row>
		             <Row>
			                <Col  span="11">
				                 <FormItem prop="class" label="班级">
				                    <Input v-model="formList.class"    placeholder="请输入"></Input>
				                 </FormItem>
			                </Col>
			                <Col span="13" style="text-align: center">	
				                <FormItem prop="num"   label="学号">
						           <Input v-model="formList.num"    placeholder="请输入">			           	
						           </Input>
				    		    </FormItem>
			                </Col>
			            </Row>	      
			        <FormItem prop="remark"  label="自我介绍">
			            <Input  v-model="formList.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
			        </FormItem>
			         <FormItem prop="gowhere" label="毕业去向">
			            <Input  v-model="formList.gowhere" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
			        </FormItem>
			        <FormItem>
			            <Button type="primary" @click="loadPeopleData()">提交</Button>
			            <Button type="ghost" style="margin-left: 8px">取消</Button>
			        </FormItem>
			    </Form>
			</col>
    </Row>
    </div>
</template>
<script>
	import {postDataToServer} from '../../assets/js/post.js'
    export default {
 		props:["searchData"],
        data () {
            return {
            	defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: [],
              
                formList:{
                    name:"",
                    num:"",
                    birthday:"",
                    gowhere:"",
            		sex:"",
            		class:"",
                    conect:"",
                    photo:'',
                    remark:'' 
                    //介绍
                },
                rulesList:{
                	num:[
            		{required :true, message: '学号不能为空',trigger:'blur'},
            		{type:'string',max: 10, message: '学号不能超过十位数', trigger: 'blur' }            		
            		],
            		class:[
            		{required :true, message: '班级不能为空',trigger:'blur'},
            		],
            		name:[
            		{required :true, message: '名字不能为空',trigger:'blur'},
            		{type:'string',max: 4, message: '名称不能多于4个字', trigger: 'blur' }            		
            		],
            		conect:[
            		{ required: true, type: 'string', message: '请填写email', trigger: 'blur' }
            		],
            		birthday:[
            		{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }
            		],
            		remark:[
            		{required :true, message: '介绍不能为空',trigger:'blur'},
            		{type:'string',max: 120, message: '名称不能多于120个字', trigger: 'blur' }            		
            		],
            		gowhere:[
            		{required :true, message: '去向不能为空',trigger:'blur'},
            		{type:'string',max: 10, message: '内容不能超过十个字', trigger: 'blur' }            		
            		],
            		
            	},
            }

        },
        created(){
        	console.log(this.searchData);
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        },
        methods:{
        	 handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                // 从 upload 实例删除数据
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            },
        	loadPeopleData(){
        		console.log(this.formList)
        		let _this = this;
		    	let data = new Object();
		        let parameter = new Object();
		        data.url = "MEMBER_ADD";
		        parameter = _this.formList;
		        data.parameter = parameter;
        		postDataToServer(data).then((data)=>{
        			console.log(data);
        			if(data.status === 0){
						_this.form = data.datalist;
					}else{
						_this.$message.error(data.message);
					}
        		})
        	}
        }
    }
</script>
<style scoped>
.div_photo{
	border:1px dashed #dddee1;
	height: 200px;
	width: 160px;
	margin-bottom: 50px;
	background: url("../../../static/img/107852308864054201.jpg") no-repeat;  
    background-size:100% 100%;
}
.div_eye{
	width: 58px;
	height:58px;
	line-height: 58px;
	border:1px dashed #dddee1;
}
</style>
